import { TypographyTitle } from '@/components/Typography';
import { AutoComplete, Input } from 'antd';
import React, { ChangeEvent, useContext, useMemo } from 'react';
import { AcceptanceManageAPI } from '../common/type';
import { AcceptanceManageContext, IAcceptanceActionEnum } from '../mconfig';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { clickScrollToAnchor, loopArrayChildren } from '@/utils';

export const ManageTreeTypeTitle: React.FC<AcceptanceManageAPI.IManageTreeTypeTitle> = ({ searchValueTree, typeTreeData, saveSetSearchValue }) => {
  /**
   * 获取上下文
   */
  const { prefixCls, reloadLeftTree, acceptanceDispatch } = useContext(AcceptanceManageContext);

  /**
   * 搜索下拉菜单
   */
  const autoOption = useMemo(() => {
    let option: Record<string, any>[] = [];
    const tileTreeData = (data: Record<string, any>[]) => {
      data?.forEach((item) => {
        if (item?.children && item?.children?.length > 0) {
          tileTreeData(item?.children);
        }
        if (item?.name?.includes(searchValueTree)) {
          // const text = item?.name;
          // const nameLength = text?.length;
          // const select = text?.search(searchValueTree);
          // const searchLength = searchValueTree?.length;
          // const afterStr = text?.slice(0, select);
          // const selectStr = searchValueTree;
          // const beforeStr = text?.slice(select + searchLength, nameLength);
          option.push({
            value: item?.name,
            key: item?.id,
            // label: (
            //   <div>
            //     <span>{afterStr}</span>
            //     <span style={{ color: '#f50' }}>{selectStr}</span>
            //     <span>{beforeStr}</span>
            //   </div>
            // ) as any,
          });
        }
      });
    };
    tileTreeData(typeTreeData);
    return option;
  }, [typeTreeData, searchValueTree]);

  /**
   * 点击搜索
   * @param value
   * @param option
   */
  const onAutoSelect = (value: string, option: any) => {
    const optionId = option?.key;
    const targetNode = loopArrayChildren(typeTreeData)?.find((i) => i?.id === optionId);
    saveSetSearchValue(value);

    acceptanceDispatch({
      type: IAcceptanceActionEnum.LEFTSELECT_KEYS,
      payload: [optionId],
    });

    acceptanceDispatch({
      type: IAcceptanceActionEnum.LEFTEXPANDED_KEYS,
      payload: [targetNode?.pID],
    });

    acceptanceDispatch({
      type: IAcceptanceActionEnum.LEFTAUTO_PARENT,
      payload: true,
    });

    setTimeout(() => {
      clickScrollToAnchor(optionId + 'AcceptanceLeftTreeType');
    }, 1000);
  };

  /**
   * 搜索框改变
   * @param e
   */
  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    saveSetSearchValue(e.target.value);
  };

  return (
    <>
      <div className={prefixCls + 'flowCategoryStyle-titleHeader'}>
        <div className={prefixCls + 'flowCategoryStyle-titleHeader-textAndAddBtn'}>
          <TypographyTitle
            level={4}
            style={{
              margin: 0,
            }}
          >
            仓库列表
          </TypographyTitle>
        </div>

        <AutoComplete
          style={{
            width: '100%',
            padding: '12px 0px 0px',
          }}
          options={autoOption}
          onSelect={onAutoSelect}
          value={searchValueTree}
        >
          <Input
            placeholder={'请按名称搜索'}
            allowClear
            suffix={<SearchOutlined />}
            onChange={onInputChange}
            addonAfter={
              <ReloadOutlined
                onClick={() => {
                  saveSetSearchValue('');
                  reloadLeftTree({});
                }}
              />
            }
          />
        </AutoComplete>
      </div>
    </>
  );
};
